<template>
  <div class="fk-list">
    <el-dialog 
      v-el-drag-dialog="{drag: true, full: true, resize: true}"
      title="业务付款"
      :close-on-click-modal="false"
      :visible.sync="md.state"
      @close="closeMd"
      v-if="md.state"
    >

    <div class="fk-top">
        <div>
            <p>经办人：</p>
            <p>{{Oper}}</p>
        </div>
        <div>
            <p>往来客户：</p>
            <p>{{User}}</p>
        </div>
        <div>
            <p>应付金额合计：</p>
            <p>{{allPayMoeny}}</p>
        </div>
    </div>



    <el-table
        :data="payList"
        border
        height="250"
        :summary-method="getSummaries"
        show-summary
        style="width: 100%; margin-top: 20px">

        <el-table-column
        prop="orderNum"
        label="订单号"
        width="150">
        </el-table-column>
        <el-table-column property="remark" label="摘要(必填)">
        <template slot-scope="scope">
            <el-input v-model="scope.row.remark" controls-position="right" style="width: 100%" class="inputClass" ></el-input>
        </template>
        </el-table-column>
        <el-table-column
        prop="payMoney"
        label="付款金额"
        width="180">
        <template slot-scope="scope">
            <el-input v-model="scope.row.payMoney" 
            controls-position="right" 
            style="width: 100%" 
            class="inputClass" 
            v-bind:disabled="scope.row.num == '1'"></el-input>
        </template>


        
        </el-table-column>
    </el-table>

    
    <el-button class="btn" type="primary" @click="onSubmit" :disabled="fm.sb.load">{{fm.sb.text}}</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import elDragDialog from '@/directive/el-drag-dialog';
import UploadImg from '@/components/UploadImg';
import { servicePay } from '@/api/services/order.service';

export default {
  name: 'PayAdd',
  directives: { elDragDialog },
  props: [ 'state', 'data'  ],
  components: { UploadImg },
  computed: {
    ...mapGetters([ 'lunitNum', 'name' ])
  },
  data() {
    return {
      md: { state: this.state },
      fm: {
        fname: 'addFk',
        sb: { load: false, text: '立即添加' },
        
        xs: {isShow: false},
      },
      allPayMoeny: 0,
      Oper:'',//经办人
      User: '',//往来客户
      payList: []//所选付款列表
    }
    
  },
  created() {
    const that = this;
    
    let list = that.data;
    that.allPayMoeny = list[1];
    that.payList = list[0];
    that.User = that.payList[0].disCar.suppCompanyCus.baseUserId.realName;
    that.Oper  = this.name;
    if(that.payList.length > 1){
        for(let i in  that.payList){
            that.payList[i].num = '2';
        }
    }else{
        that.payList[0].num = '1';
    }
  },
  methods:{
    /* 合计 */
    getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = ' ';
          }
        });

        return sums;
      },




    /* 关闭弹框 */
    closeMd(){
      this.$emit('getMdState', false);
    },
    /**
     * 提交表单
     */
    onSubmit(){
      const that = this;
      
      let ids = [];
      let remarks = [];
      let payMoneyArr = [];

      angular.forEach(that.payList,function(item){
          
          ids.push(item.id);
          remarks.push(item.remark);
          payMoneyArr.push(item.payMoney);
      });
      let info = ids.map((e,i)=>{return [e+'='+payMoneyArr[i]+'='+remarks[i]]});

      that.fm.sb.load = true; 
      let loading = that.U.qloading('提交中，请稍后...');
      servicePay({payStaffReim: info.join("@")}).then(res=> {
        that.fm.sb.load = false;
        that.U.qclose(loading);
        if(!res || res.code != 1){
          that.U.qerror(res.msg);
        }else{
          that.U.qsuccess(res.msg);
          // 关闭弹框
          that.closeMd();
          // 调用父组件方法-重新加载数据
          that.$emit('reloadDg');
        }
        
      });
    },

    // 修改贷方
    editPayMo(row){
      const that = this;
      
      if(Number(row.payMoney) > Number(row.money) || Number(row.payMoney) <= Number(0)){
        row.payMoney = row.money;
        that.U.qerror('修改的金额不能小于订单金额');
      }
    },

    // 修改借方
    editCollMo(row){
      const that = this;
      
      if(Number(row.incomeMoney) > Number(row.money) || Number(row.incomeMoney) <= Number(0)){
        row.incomeMoney = row.money;
        that.U.qerror('修改的金额不能小于订单金额');
      }
    },
  },
 }
</script>
<style lang="less" scoped>
.fk-list{
  .btn{
    margin-top: 100px;
    margin-bottom: 10px;
    margin-left: 40px;
  }
  .el-table{
      overflow:visible !important;
  }
  .fk-top{
      display: flex;
  }
  .fk-top>div{
      display: flex;
      align-items: center;
      margin-right: 10px;
  }
  .fk-top>div>p{
      margin: 0px;
  }
}
</style>